<!--
 * @Author: your name
 * @Date: 2022-04-28 16:22:59
 * @LastEditTime: 2022-05-06 15:12:20
 * @LastEditors: Xia_cc 978487464@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \第二阶段项目get 文件夹\html\lanmu.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印快递单</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../layui/font/iconfont.woff">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .clear::after {
            content: "";
            display: block;
            clear: both;
        }
        
        #show {
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: block;
            position: relative;
        }
        
        #tubiaofont {
            height: 60px;
            background-color: rgb(240, 244, 246);
        }
        
        #tubiaofont span {
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }
        
        #tabdiv {
            width: 100%;
            background-color: white;
            overflow: hidden;
        }
        
        #tabdiv>p {
            width: 100%;
            padding: 20px 10px;
            background-color: rgb(236, 239, 241);
        }
        
        #tabdiv>table {
            width: 100%;
            text-align: center;
        }
        
        #addbtn {
            margin: 1%;
        }
        
        tr {
            border: 1px solid gainsboro;
            height: 50px;
        }
        
        #piLiangAndFenYe {
            margin: 10px 0;
            height: 50px;
            position: relative;
        }
        
        #test1 {
            /* width: 200px; */
            /* height: 30px; */
            padding: 5px 10px;
            margin-top: 2px;
            /* margin-right: 10px; */
            float: right;
        }
        
        #delMuch {
            width: 100px;
            height: 30px;
            border: 1px solid gray;
            background-color: rgba(1, 1, 1, 0);
            padding: 5px 0;
            margin-top: 10px;
            margin-left: 10px;
            border-radius: 2px;
            float: left;
        }
        
        #fenYe {
            width: 400px;
            height: 30px;
            margin-left: 1000px;
            border-style: none;
        }
        
        #fenYe>div {
            float: left;
        }
        
        #fenYe .fenyepag {
            width: 90px;
            height: 30px;
            line-height: 26px;
            margin: 7px 5px;
            border-style: none;
        }
        
        #test1 button {
            width: 40px;
            height: 30px;
            line-height: 26px;
            margin: 0 5px;
            border-style: none;
        }
        
        #tanchukuang {
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: none;
        }
        
        #tubiaofont {
            height: 60px;
            background-color: rgb(240, 244, 246);
        }
        
        #tubiaofont span {
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }
        
        #popup_box {
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;
        }
        
        #popup_box>p {
            padding: 14px 0;
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }
        
        #popup_box>p>span {
            display: inline-block;
            width: 100px;
            border: 1px solid gray;
            background-color: white;
            padding: 5px 0;
            text-align: center;
            margin-left: 70%;
            border-radius: 2px;
        }
        
        #popup_box>div {
            width: 40%;
            margin: 0 auto;
            padding: 30px 0;
        }
        
        #popup_box>div>div {
            margin-bottom: 40px;
        }
        
        #popup_box>div input {
            display: inline-block;
            width: 200px;
            padding: 5px;
        }
        
        #popup_box>div>div>span {
            display: inline-block;
            width: 60px;
        }
        
        #tijiao {
            margin-left: 45%;
        }
        
        #chongzhi {
            border: 1px solid black;
            box-sizing: border-box;
        }
        
        .chaKan {
            background-color: coral;
        }
        
        .dingdan {
            width: 150px;
            height: 38px;
            margin: 2%;
            float: left;
        }
        /*  .dingdan>select{
            width: 150px;
            height: 38px;
            margin: 2%;
            margin-bottom: 30px;
            float: left;
        } */
        
        #chaKanDocument {
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
        }
        
        #showChaKan {
            width: 50%;
            text-align: left;
            display: table;
        }
        
        #showP {
            display: table-cell;
            vertical-align: middle;
        }
        
        #showP>p {
            line-height: 40px;
        }
        
        #yesOrNo {
            width: 130px;
            height: 38px;
            padding: 0 10px;
            margin: 30px 50px;
        }
        
        #yesOrNo>option {
            display: block;
            width: 130px;
            /* height: 58px; */
            padding: 50px 10px;
            /* background-color: aquamarine; */
        }
        
        #tianjiaDocument {
            width: 95%;
            padding: 0 2.5% 2.5% 2.5%;
            background-color: rgb(240, 244, 246);
            display: none;
        }
        
        #tjtubiaofont {
            height: 60px;
            background-color: rgb(240, 244, 246);
        }
        
        #tjtubiaofont span {
            display: inline-block;
            height: 60px;
            line-height: 60px;
            color: gray;
        }
        
        #tjpopup_box {
            width: 100%;
            background-color: white;
            padding-bottom: 20px;
            overflow: hidden;
        }
        
        #tjpopup_box>p {
            padding: 14px 0;
            width: 100%;
            padding: 20px 0;
            background-color: rgb(236, 239, 241);
        }
        
        #tjpopup_box>p>span {
            display: inline-block;
            width: 100px;
            border: 1px solid gray;
            background-color: white;
            padding: 5px 0;
            text-align: center;
            margin-left: 70%;
            border-radius: 2px;
        }
        
        #tjpopup_box>div {
            width: 40%;
            margin: 0 auto;
            padding: 30px 0;
        }
        
        #tjpopup_box>div>div {
            margin-bottom: 40px;
        }
        
        #tjpopup_box>div input {
            display: inline-block;
            width: 190px;
            padding: 5px;
        }
        
        #tjpopup_box>div>div>span {
            display: inline-block;
            width: 60px;
        }
        
        #tianjia {
            margin-left: 45%;
        }
        
        #tjchongzhi {
            border: 1px solid black;
            box-sizing: border-box;
        }
        
        #findSpan {
            margin: 0 50px;
            height: 38px;
            width: 300px;
        }
        
        #findWuLiu {
            height: 38px;
            width: 300px;
            size: 30px;
        }
        
        #shuaxin {
            margin: 0 10px;
        }
        
        #findWuLiu {
            padding: 0 10px;
        }
        
        #fenYe {
            position: absolute;
            right: 10px;
        }
        
        #fenYe>div {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 界面 -->
    <div id="show">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>订单</span>
            <span style="font-size: 15px;">&gt;&gt;</span>
            <span>打印快递单</span>

        </div>
        <div id="tabdiv">
            <p style="font-size: 20px;" style="margin:0 10px;">分类列表</p>
            <!-- <form action="" class="layui-form dingdan" > -->
            <select name="DaYin" lay-verify="" id="yesOrNo" class="selected">
                    <option style="size: 30px;"" value="alldingdan">全部订单</option>
                    <option value="yidayin">已打印</option>
                    <option value="weidayin">未打印</option>
                 </select>
            <!-- </form> -->
            <!-- <button id="queDing">查询</button> -->
            <table>
                <!-- 表格的总宽度以定，高度以定，根据自己的表格的具体内容进行排版 -->
                <button id="addbtn" class="layui-btn">添加订单</button>
                <!-- 按钮的样式 -->
                <span id="findSpan">查找&nbsp;&nbsp;
                   <input type="text" id="findWuLiu" placeholder="请输入你想查找的物流编号">
                   <span id="shuaxin" class="layui-icon layui-icon-refresh-1"></span>
                </span>
                <thead>
                    <tr>
                        <th><input class="allCheck" type="checkbox"></th>
                        <th>ID</th>
                        <th>订单编号</th>
                        <th>物流编号</th>
                        <th>是否打印</th>
                        <th>操作员</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="userTbody">

                </tbody>
            </table>
            <div id="piLiangAndFenYe" class="clear">
                <button id="delMuch">批量删除</button>
                <button id="delMuch">批量删除</button>
                <div id="fenYe" class="clear">
                    <div>
                        <button id="pagUp" class="fenyepag">上一页</button>
                    </div>
                    <div id="test1"></div>
                    <!-- 生成分页 -->
                    <div>
                        <button id="pagDow" class="fenyepag">上一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 点击修改或增加的弹出框 -->
    <div id="tanchukuang">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>订单</span>
            <span style="font-size: 15px;">&gt;&gt;</span>
            <span>打印快递单</span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>查看</span>
        </div>
        <div id="popup_box">
            <p>查看快递信息<span id="back">返回列表</span> </p>

            <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
            <div id="showChaKan">
                <div id="showP">

                </div>
            </div>
        </div>
    </div>
    <!-- 查看页面 -->
    <div id="chaKanDocument">
        <!--  <button>返回列表</button> -->
    </div>
    <!-- 添加数据页面 -->
    <div id="tianjiaDocument">

        <div id="tjtubiaofont">
            <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>订单</span>
            <span style="font-size: 15px;">&gt;&gt;</span>
            <span>打印快递单</span>
            <span style="font-size: 15px; ">&gt;&gt;</span>
            <span>添加订单</span>
        </div>
        <div id="tjpopup_box">
            <p id="TJbut">添加订单信息 <span id="tjbackBut">返回列表</span> </p>

            <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
            <div>
                <div>
                    <span>ID</span><input type="text" name="" id="tjiD">
                </div>
                <div>
                    <span>订单编号</span><input type="text" name="" id="tjfahuoren">
                    <span>物流编号</span><input type="text" name="" id="tjlianxifangshi">
                </div>
                <div>
                    <span>是否打印</span><input type="text" name="" id="tjfahuodizhi">
                    <span>操作员</span><input type="text" name="" id="tjshouhuodizi">
                </div>
            </div>
            <button id="tianjia" class="layui-btn layui-btn-sm">添加</button>
            <button id="tjchongzhi" class="layui-btn layui-btn-sm" style="background-color: white; color: black;">重置</button>
        </div>
    </div>

    <script src="../../js/jQuery.3.6.0-uncompress.js"></script>
    <script src="../../layui/layui.js"></script>
    <script type="text/javascript">
        var kuaiDiDanArr = [{
            ID: "1",
            订单编号: "1533019644791",
            物流编号: "278768378384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "2",
            订单编号: "1367019644791",
            物流编号: "211238378384681",
            是否打印: "未打印",
            操作员: "朱迪"
        }, {
            ID: "3",
            订单编号: "1455019674791",
            物流编号: "278145678384681",
            是否打印: "已打印",
            操作员: "安大道"
        }, {
            ID: "4",
            订单编号: "1567489645791",
            物流编号: "123198378384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "5",
            订单编号: "1243031644591",
            物流编号: "275598378384681",
            是否打印: "已打印",
            操作员: "马克"
        }, {
            ID: "6",
            订单编号: "1889929644791",
            物流编号: "567898378384681",
            是否打印: "已打印",
            操作员: "马克"
        }, {
            ID: "7",
            订单编号: "1677016464791",
            物流编号: "578198378384681",
            是否打印: "未打印",
            操作员: "朱迪"
        }, {
            ID: "8",
            订单编号: "1536524644791",
            物流编号: "278198379004681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "9",
            订单编号: "1123019644791",
            物流编号: "456098378384681",
            是否打印: "未打印",
            操作员: "安大道"
        }, {
            ID: "10",
            订单编号: "1563019454791",
            物流编号: "088111178384681",
            是否打印: "已打印",
            操作员: "马克"
        }, {
            ID: "11",
            订单编号: "1523145644791",
            物流编号: "778194566384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "12",
            订单编号: "1531789644791",
            物流编号: "221298378384681",
            是否打印: "已打印",
            操作员: "马克"
        }, {
            ID: "13",
            订单编号: "1545519644791",
            物流编号: "956198378384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "14",
            订单编号: "1234519644791",
            物流编号: "278156478384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "15",
            订单编号: "1533019644791",
            物流编号: "811198378384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "16",
            订单编号: "1533019644791",
            物流编号: "958198346384681",
            是否打印: "已打印",
            操作员: "马克"
        }, {
            ID: "17",
            订单编号: "1533019644791",
            物流编号: "778198378384681",
            是否打印: "未打印",
            操作员: "朱迪"
        }, {
            ID: "18",
            订单编号: "1533019644791",
            物流编号: "278978378384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "19",
            订单编号: "1533019644791",
            物流编号: "278198372184681",
            是否打印: "未打印",
            操作员: "安大道"
        }, {
            ID: "20",
            订单编号: "1533019644791",
            物流编号: "473588378384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "21",
            订单编号: "1533019644791",
            物流编号: "278194278384681",
            是否打印: "未打印",
            操作员: "马克"
        }, {
            ID: "22",
            订单编号: "1533019644791",
            物流编号: "200198378384681",
            是否打印: "未打印",
            操作员: "马克"
        }, ]
        var orderFormArr = [{
            id: '01',
            orderNumber: 1533019644791,
            buyerUserName: 'test1',
            orderMoney: 6390,
            orderStatus: '未确认',
            paymentStatus: '未支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: '02',
            orderNumber: 1533019644791,
            buyerUserName: 'test2',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: '03',
            orderNumber: 1533019644791,
            buyerUserName: 'test3',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: '04',
            orderNumber: 1533019644791,
            buyerUserName: 'test4',
            orderMoney: 6390,
            orderStatus: '已完成',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: '05',
            orderNumber: 1533019644791,
            buyerUserName: 'test1',
            orderMoney: 6390,
            orderStatus: '未确认',
            paymentStatus: '未支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: '06',
            orderNumber: 1533019644791,
            buyerUserName: 'test2',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: '07',
            orderNumber: 1533019644791,
            buyerUserName: 'test3',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: '08',
            orderNumber: 1533019644791,
            buyerUserName: 'test4',
            orderMoney: 6390,
            orderStatus: '已完成',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: '09',
            orderNumber: 1533019644791,
            buyerUserName: 'test1',
            orderMoney: 6390,
            orderStatus: '未确认',
            paymentStatus: '未支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: '10',
            orderNumber: 1533019644791,
            buyerUserName: 'test2',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: '11',
            orderNumber: 1533019644791,
            buyerUserName: 'test3',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: '12',
            orderNumber: 1533019644791,
            buyerUserName: 'test4',
            orderMoney: 6390,
            orderStatus: '已完成',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: 13,
            orderNumber: 1533019644791,
            buyerUserName: 'test1',
            orderMoney: 6390,
            orderStatus: '未确认',
            paymentStatus: '未支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: 14,
            orderNumber: 1533019644791,
            buyerUserName: 'test2',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: 15,
            orderNumber: 1533019644791,
            buyerUserName: 'test3',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: 16,
            orderNumber: 1533019644791,
            buyerUserName: 'test4',
            orderMoney: 6390,
            orderStatus: '已完成',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: 17,
            orderNumber: 1533019644791,
            buyerUserName: 'test1',
            orderMoney: 6390,
            orderStatus: '未确认',
            paymentStatus: '未支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: 18,
            orderNumber: 1533019644791,
            buyerUserName: 'test2',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: 19,
            orderNumber: 1533019644791,
            buyerUserName: 'test3',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: 20,
            orderNumber: 1533019644791,
            buyerUserName: 'test4',
            orderMoney: 6390,
            orderStatus: '已完成',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: 21,
            orderNumber: 1533019644791,
            buyerUserName: 'test1',
            orderMoney: 6390,
            orderStatus: '未确认',
            paymentStatus: '未支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: 22,
            orderNumber: 1533019644791,
            buyerUserName: 'test2',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '未发货'
        }, {
            id: 23,
            orderNumber: 1533019644791,
            buyerUserName: 'test3',
            orderMoney: 6390,
            orderStatus: '已确认',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }, {
            id: 24,
            orderNumber: 1533019644791,
            buyerUserName: 'test4',
            orderMoney: 6390,
            orderStatus: '已完成',
            paymentStatus: '已支付',
            paymentMethod: '网上支付',
            shipmentStatus: '已发货'
        }]

        let pageSize = 10; //每一页显示的条数
        let currentPage = 1; //当前页
        let totalPage; //总页数

        showInformation(kuaiDiDanArr); //调用显示函数
        chickOne(); //点击选择框
        chickEveryOne(); //点击每个选择框
        producePage(kuaiDiDanArr); //分页
        addPageEvent(); //分页按钮添加事件
        scriptThing(); //下拉列表事件
        deleteMuch(); //批量下载
        addInfor(); //添加数据
        addTiJiaoBut(); //添加数据 提交按钮 事件
        addBackBut(); //添加数据 返回列表 事件
        resetButton(); //重置按钮事件
        souSuoWuLiu(); //物流搜索框、
        shuaXinBut(); //搜索框刷新事件
        //=================================================数据渲染部分===============================================================================     

        //显示数据
        function showInformation(ok) {
            $("#userTbody").html(""); //清空里面的内容
            let start = (currentPage - 1) * pageSize; //开始页
            let end = currentPage * pageSize; //结束页
            for (var i = start; i < end && i < ok.length; i++) {
                $("#userTbody").append(
                    `<tr class="caoZuo">
                        <td><input class="clickone" type="checkbox"></td>
                        <td>${ok[i].ID}</td>
                        <td>${ok[i].订单编号}</td>
                        <td>${ok[i].物流编号}</td>
                        <td>${ok[i].是否打印}</td>
                        <td>${ok[i].操作员}</td>
                        <td >
                            <button  type="button" class="layui-btn layui-btn-sm chaKan" data-ck="${ok[i].ID}">查看</button>
                            
                            <button  type="button" class="cc layui-btn layui-btn-normal layui-btn-sm" style="background-color: red;"   data-id="${ok[i].ID}" ><i class="layui-icon"></i></button>
                        </td>
                    </tr>
                   `
                )

            }

        }

        // ========================================添加数据==========================================
        //添加数据
        function addInfor() {
            $("#addbtn").click(function() {

                $("#tianjiaDocument").show(); //显示添加界面
                $("#show").hide();

            })
        }
        //添加订单界面 返回列表 按钮
        function addBackBut() {
            $("#tjbackBut").click(function() {
                $("#tianjiaDocument").hide(); //显示添加界面
                $("#show").show();
            })
        }
        //添加订单 提交按钮添加事件
        function addTiJiaoBut() {
            $("#tianjia").click(function() {
                var id = $("#tjiD").val(); //id内容
                var faHuoRen = $("#tjfahuoren").val(); //订单编号的文本内容
                var lianXiFanShi = $("#tjlianxifangshi").val(); //物流编号的文本内容
                var faHuoDiZhi = $("#tjfahuodizhi").val(); //是否已打印文本内容
                var shouHuoDiZhi = $("#tjshouhuodizi").val(); //操作员文本内容
                var newShuZu = {
                    ID: id,
                    订单编号: faHuoRen,
                    物流编号: lianXiFanShi,
                    是否打印: faHuoDiZhi,
                    操作员: shouHuoDiZhi
                };
                console.log(newShuZu);
                kuaiDiDanArr.push(newShuZu);
                showInformation(kuaiDiDanArr); //重新渲染页面
                resetTHING(); //将文本框内容清空
                addInfor(); //调用数据
                $("#tianjiaDocument").hide(); //显示添加界面
                $("#show").show();
            })
        }
        //重置事件
        function resetTHING() {
            $("#tjiD").val("");
            $("#tjfahuoren").val("");
            $("#tjlianxifangshi").val("");
            $("#tjfahuodizhi").val("");
            $("#tjshouhuodizi").val("");
        }
        //添加订单界面 重置 按钮
        function resetButton() {
            $("#tjchongzhi").click(function() {
                resetTHING();
            })
        }
        //  ======================================删除部分===========================================================================================

        //根据当前点击的删除按钮，删除当前数据
        function delInfor(id) {
            for (var i = 0; i < kuaiDiDanArr.length; i++) {
                if (kuaiDiDanArr[i].ID == id) {
                    kuaiDiDanArr.splice(i, 1);
                    break;
                }
            }
        }
        //点击删除的弹出框的点击事件
        $("#userTbody").on("click", ".cc", function() { // 给删除按钮绑定事件即可  用事件委派，这儿是只给一个删除绑定了
            let id = $(this)[0].dataset.id;
            console.log(id);
            layer.confirm('确认删除？', {
                btn: ['确认', '取消'] //按钮
            }, function() {
                delInfor(id); // 删除数据
                producePage(kuaiDiDanArr); //重新调用页码
                showInformation(kuaiDiDanArr); //调用显示
                layer.msg('已删除', {
                    icon: 1,
                    time: 500
                });
            });
        })

        //============================批量删除========================================================================================================
        //给批量删除按钮添加点击删除事件
        function deleteMuch() {
            $("#delMuch").click(function() {
                let delButAll = []; //创建新数组
                let count = 0; //数量为0
                for (var i = 0; i < kuaiDiDanArr.length; i++) {
                    if (!$(".clickone").eq(i).prop("checked")) { //获取每个单选框的状态
                        delButAll.push(kuaiDiDanArr[i]);
                    } else {
                        count++;
                    }
                }
                if (count > 0) {
                    kuaiDiDanArr = delButAll; //将没有选中的数组保留给之前数组
                    producePage(kuaiDiDanArr); //重新渲染分页
                    showInformation(kuaiDiDanArr); //重新渲染页面
                }
            })
        }
        //===================================================下拉列表选项=============================================================================
        //下拉列表事件
        function scriptThing() {

            $("#yesOrNo").change(function() {
                let selectThis = $("#yesOrNo").val();
                console.log();
                if (selectThis == "alldingdan") { //如果下拉列表的值等于全部数据
                    producePage(kuaiDiDanArr); //重新渲染分页
                    showInformation(kuaiDiDanArr); //直接显示页面
                } else if (selectThis == "yidayin") {
                    let newyidayin = kuaiDiDanArr.filter(function(item) {
                        return item.是否打印 == "已打印"; //找到数据中是否已打印快递的值 为已打印的
                    });
                    console.log(newyidayin);
                    // kuaiDiDanArr = newyidayin;
                    producePage(newyidayin); //重新渲染分页
                    showInformation(newyidayin);
                } else if (selectThis == "weidayin") {
                    let newweidayin = kuaiDiDanArr.filter(function(item) {
                        return item.是否打印 == "未打印"; //找到数据中是否已打印快递的值 为未打印的
                    });
                    console.log(newweidayin);
                    // kuaiDiDanArr = newweidayin;   //先将数组清空
                    producePage(newweidayin); // 刷新页面
                    showInformation(newweidayin);
                }
            })
        }
        //下拉菜单事件
        /* var vall = $("#yesOrNo option").html();
        selectedThing(vall);
        function selectedThing(vall){
             console.log(vall);
             var vall = $("#yesOrNo option").html();
             $("#yesOrNo").change(function(){
                console.log(vall);
                    let newyidayin = kuaiDiDanArr.filter(function(item){
                        return item.是否已打印快递单 == vall;    //找到数据中是否已打印快递的值 为已打印的
                    }); 
             kuaiDiDanArr = newyidayin;   //先将数组清空
             showInformation(); 
            })
        } */
        //===============搜索框=============================================================
        // 搜索框事件
        function souSuoWuLiu() {
            $("#findWuLiu").change(function() {
                var souSuoInputVal = $("#findWuLiu").val(); //找到搜索框的值
                var nowsouSuoInputVal = kuaiDiDanArr.filter(function(item) { //循环数组据
                        return item.物流编号 == souSuoInputVal; //找到数组中键名等于搜索框的值的内容
                    })
                    // kuaiDiDanArr = nowsouSuoInputVal;  //将新数组重新复制给数据
                producePage(nowsouSuoInputVal); //重新渲染分页
                showInformation(nowsouSuoInputVal); //重新渲染页面
            })
        }
        //搜索框刷新
        function shuaXinBut() {
            $("#shuaxin").click(function() {
                $("#findWuLiu").val(""); //输入框的值为0
                producePage(kuaiDiDanArr); //页面刷新
                showInformation(kuaiDiDanArr); //重新渲染页面
            })
        }
        //========================================多选框部分=============================================================================================
        //全选按钮点击事件
        function chickOne() {
            $(".allCheck").click(function() {
                let AllChick = $(".allCheck").prop("checked"); //全选框的状态
                $(".clickone").prop("checked", AllChick); //每个选择框的状态跟全选框一样
            })
        }
        //当个按钮点击事件
        function chickEveryOne() {
            $("#userTbody").on("click", ".clickone", function() {
                checkALL();
            })
        }
        //全选事件
        function checkALL() {
            for (var i = 0; i < kuaiDiDanArr.length; i++) {
                if ((".clickone:not(:checked)").length == 0) { //没有选中的个数
                    $(".allCheck").prop("checked", true); //添加全选框的是否点击属性值
                } else {
                    $(".allCheck").prop("checked", false);
                }
            }

        }
        //===========================================分页部分==================================================================================

        // 创建页数
        function producePage(page) {
            totalPage = Math.ceil(page.length / pageSize); //总页数等于总条数/每页的条数
            currentPage = currentPage > totalPage ? totalPage : currentPage; //当前页
            //生成对应的页码
            $("#test1").html(""); //先将页码清空
            for (var i = 1; i <= totalPage; i++) {
                $("#test1").append(`
                    <button class="pageBut">${i}</button>
                `)
            }
        }
        //给页码按钮添加事件
        function addPageEvent() {
            $("#piLiangAndFenYe").on("click", ".pageBut", function() {
                currentPage = parseInt($(this).text());
                console.log(currentPage);
                producePage(kuaiDiDanArr);
                showInformation(kuaiDiDanArr);
            })
        }

        /*  layui.use('laypage', function(){
         var laypage = layui.laypage;
         //执行一个laypage实例
             laypage.render({
                 elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                 ,count:kuaiDiDanArr.length  //数据总数，从服务端得到，可直接使用数组长度
             });
         }); */
        //=======================================================查看=====================================================================================
        //给查看按钮添加事件
        $("#userTbody").on("click", ".chaKan", function() {
                let ck = $(this)[0].dataset.ck;
                console.log(ck);
                for (var i = 0; i < kuaiDiDanArr.length; i++) {
                    if (kuaiDiDanArr[i].ID == ck) {
                        $("#tanchukuang").css("display", "block"); //弹出框取消隐藏
                        $("#show").css("display", "none"); //隐藏界面
                        $("#showP").html(""); //先将showP清空
                        $("#showP").append(`    
                    <div>
                       <p>ID ：${kuaiDiDanArr[i].ID}</p> <br>
                       <p>订单编号 ： ${kuaiDiDanArr[i].订单编号}</p> <br>
                       <p>物流编号 ： ${kuaiDiDanArr[i].物流编号}</p> <br>
                       <p>是否打印 ：${kuaiDiDanArr[i].是否打印}</p> <br>
                       <p>操作员 ：${kuaiDiDanArr[i].操作员}</p> <br>
                    </div>
                     `)
                    }
                }
            })
            //查看之后的返回列表
        $("#back").click(function() {
                $("#showP").html(""); //内容清空
                $("#show").css("display", "block"); // 显示界面
                $("#tanchukuang").css("display", "none"); // 弹出框隐藏
            })
            //==============================================调用函数部分=====================================================================================
    </script>
</body>

</html>